<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 530px;
            display: flex;
            justify-content: space-between;
        }

        img {
            width: 50px;
            height: 50px;
            border-radius: 25px;
        }

        .box textarea {
            width: 400px;
            height: 50px;
            transition: all 0.7s;
            resize: vertical;
        }

        #xx:focus {
            height: 100px;
        }

        span {
            margin-left: 400px;
            opacity: 0;
            transition: all 0.7s;
        }

        button {
            width: 60px;
            height: 30px;
            background-color: orange;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }

        /* 留言列表简单样式 */
        #messages {
            width: 530px;
            margin-top: 10px;
        }

        .message {
            background: #f5f5f5;
            padding: 8px 10px;
            border-radius: 6px;
            margin-bottom: 8px;
            word-wrap: break-word;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="./images/4.webp" alt="">
        <textarea maxlength="200" name="" id="xx" placeholder="发一条友善的评论"></textarea>
        <button id="postBtn">发布</button>
    </div>
    <span id="counter">0/200字</span>

    <!-- 留言显示容器 -->
    <div id="messages" aria-live="polite"></div>

    <script>
        const tx = document.querySelector('#xx')
        const span = document.querySelector('#counter')
        const btn = document.querySelector('#postBtn')
        const messages = document.querySelector('#messages')

        function updateCounter() {
            span.innerText = tx.value.length + '/200字'
        }

        function publish() {
            const text = tx.value.trim()
            if (!text) return
            const div = document.createElement('div')
            div.className = 'message'
            div.innerText = text
            // 新留言放在最上面
            messages.prepend(div)
            tx.value = ''
            updateCounter()
            tx.focus()
        }

        // 输入计数
        tx.addEventListener('input', updateCounter)

        // 显示/隐藏计数器
        tx.addEventListener('focus', function () {
            span.style.opacity = 1
        })
        tx.addEventListener('blur', function () {
            // 延迟隐藏，避免点击发布按钮时计数消失太快
            setTimeout(() => { span.style.opacity = 0 }, 200)
        })

        // 回车发布（Shift+Enter 换行）
        tx.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault()
                publish()
            }
        })

        // 按钮发布
        btn.addEventListener('click', publish)

        // 初始化计数显示
        updateCounter()
    </script>
</body>

</html>